<script setup lang="ts">
import StarBackground from './star-background.vue';

const props = withDefaults(
  defineProps<{
    isAbsolute?: boolean;
  }>(),
  {
    isAbsolute: true,
  }
);
</script>

<template>
  <div
    :class="[
      'top-0 left-0 w-screen h-screen z-10 bg-container-background text-primary-text flex flex-col',
      props.isAbsolute ? 'absolute' : 'relative',
    ]"
  >
    <div class="h-8 flex-none">
      <star-background
        :star-count="50"
        :star-size="1"
        :twinkle-speed="2"
      ></star-background>
    </div>
    <slot></slot>
    <div class="h-8 flex-none">
      <star-background
        :star-count="50"
        :star-size="1"
        :twinkle-speed="2"
      ></star-background>
    </div>
  </div>
</template>
